<template>

    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="50px">
            <!-- <el-form-item label="班次" prop="shift">
                <el-select placeholder="请选择班次" v-model="queryParams.shift" style="width: 160px" clearable
                    @change="handleQuery">
                    <el-option label="白班" value="1"></el-option>
                    <el-option label="夜班" value="2"></el-option>
                </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="台位" prop="positionName">
        <el-input v-model="queryParams.positionName" show-word-limit placeholder="请输入台位" maxlength="10" clearable
          @keyup.enter.native="handleQuery" style="width: 160px" />
      </el-form-item> -->
            <el-form-item label="股道" prop="trackName">
                <el-input v-model="queryParams.trackName" show-word-limit placeholder="请输入股道" maxlength="10" clearable
                    @keyup.enter.native="handleQuery" style="width: 160px" />
            </el-form-item>
            <el-form-item label="1列位车号" label-width="80px" prop="oneColumn">
                <el-input v-model="queryParams.oneColumn" show-word-limit placeholder="请输入1列位车号" maxlength="15"
                    clearable @keyup.enter.native="handleQuery" style="width: 160px" />
            </el-form-item>
            <el-form-item label="2列位车号" label-width="80px" prop="twoColumn">
                <el-input v-model="queryParams.twoColumn" show-word-limit placeholder="请输入2列位车号" maxlength="15"
                    clearable @keyup.enter.native="handleQuery" style="width: 160px" />
            </el-form-item>
            <el-form-item label="长编组重联" label-width="90px" prop="isLong">
                <el-select placeholder="请选择" v-model="queryParams.isLong" style="width: 160px" clearable
                    @change="handleQuery">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="日期">
                <el-date-picker v-model="queryParams.jobDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <div class="searchReset">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <!-- <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['workPlan:workPlan:add']">新增</el-button>
      </el-col> -->
            <el-col :span="1.5">
                <el-button type="danger" size="mini" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['workPlan:workPlan:remove']">删除</el-button>
            </el-col>
            <!-- <el-col :span="1.5"> 
                <el-button size="mini" @click="handleBack">返回</el-button>
            </el-col> -->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-tabs v-model="activeNames" @tab-click="handleClicks">
            <el-tab-pane label="一台位" name="first"></el-tab-pane>
            <el-tab-pane label="二台位" name="second"></el-tab-pane>
            <el-tab-pane label="三台位" name="third"></el-tab-pane>
            <el-tab-pane label="四台位" name="fourth"></el-tab-pane>
        </el-tabs>
        <div :class="eleTabTop <= 85 ? 'eleTab' : ''" class="informationTab" ref="eleTab">
            <el-table v-loading="loading" :data="workPlanList" @selection-change="handleSelectionChange"
                :header-cell-style="{ 'text-align': 'center' }">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" align="center" type="index" width="55" />
                <el-table-column label="班次" align="center" prop="shift" />
                <el-table-column label="日期" align="center" prop="jobDate" width="180">
                </el-table-column>
                <el-table-column label="台位" align="center" prop="positionName" />
                <el-table-column label="股道" align="center" prop="trackName" />
                <el-table-column label="1列位" align="center" prop="oneColumn" min-width="140">
                    <template slot-scope="scope">
                        <div @click="
                            OneColmu(scope.row.oneColumn, scope.row.id, scope.row.planGuid)
                            ">
                            {{ scope.row.oneColumn }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="2列位" align="center" prop="twoColumn" min-width="140">
                    <template slot-scope="scope">
                        <div @click="
                            twoColumn(scope.row.twoColumn, scope.row.id, scope.row.planGuid)
                            ">
                            {{ scope.row.twoColumn }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="长编组重联" align="center" prop="isLong" min-width="120" />
                <el-table-column label="班组卡控" align="center" min-width="150">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.teamOnoff" active-value="1" inactive-value="0"
                            @change="handleStatusChange(scope.row)"></el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="right" class-name="small-padding fixed-width" width="580px"
                    fixed="right">
                    <template slot-scope="scope">
                        <!-- <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
              v-hasPermi="['PlanTeam:PlanTeam:view']" @click="handleViews(scope.row)">详情
            </el-button> -->
                        <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
                            v-hasPermi="['PlanTeam:PlanTeam:set1Time']"
                            @click="handleSettingFirstTime(scope.row)">设置1列位时间
                        </el-button>
                        <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
                            v-hasPermi="['PlanTeam:PlanTeam:set2Time']"
                            @click="handleSettingSecondTime(scope.row)">设置2列位时间
                        </el-button>
                        <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
                            v-hasPermi="['PlanTeam:PlanTeam:set1Work']" @click="handleSettingFirst(scope.row)">设置1列位班组
                        </el-button>
                        <el-button class="operite" icon="el-icon-setting" size="mini" type="text"
                            v-hasPermi="['PlanTeam:PlanTeam:set2Work']" @click="handleSettingSecond(scope.row)">设置2列位班组
                        </el-button>
                        <!-- <el-button class="operite" icon="el-icon-setting" size="mini" type="text" v-if="scope.row.isLong == '是'"
              v-hasPermi="['PlanTeam:PlanTeam:add']" @click="handleWorkplan(scope.row)">设置作业班组
            </el-button> -->
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                            v-hasPermi="['workPlan:workPlan:edit']">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" class="delBtn_R"
                            @click="handleDelete(scope.row)" v-hasPermi="['workPlan:workPlan:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 添加作业计划对话框 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="900px" append-to-body>
            <el-form ref="form" :model="form" label-width="130px" :rules="rules">
                <div style="display: flex">
                    <el-form-item label-width="0px">
                        <el-radio-group v-model="form.shift">
                            <el-radio label="1">白班</el-radio>
                            <el-radio label="2">夜班</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="日期" prop="jobDate">
                        <el-date-picker v-model="form.jobDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </div>

                <el-table :data="form.workPlanList" border style="width: 100%; margin-bottom: 20px"
                    :span-method="objectSpanMethod" max-height="520px">
                    <el-table-column prop="positionName" label="台位" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="trackName" label="股道" width="120" align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="1列位" align="center">
                        <template slot-scope="scope">
                            <!--   @clear="setvalueclear(scope.row, scope.$index)"
               @change="handleOneColumnId(scope.row, scope.$index)"
              -->
                            <el-select placeholder="请选择车号" filterable v-model="scope.row.oneColumnId" clearable>
                                <el-option v-for="item in choiceList" :key="item.id" :label="item.code"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <!--     :disabled="scope.$index==3 || scope.$index==4 || scope.$index==5 || scope.$index==6
                || scope.$index==10 || scope.$index==11 || scope.$index==12 || scope.$index==13
                || scope.$index==17 || scope.$index==18 || scope.$index==19 || scope.$index==20
                || scope.$index==24 || scope.$index==25 || scope.$index==26 || scope.$index==27?true:false" -->
                    <el-table-column prop="address" label="2列位" align="center">
                        <template slot-scope="scope">
                            <!--  @change="handleTwoColumnId(scope.row, scope.$index)" -->
                            <el-select placeholder="请选择车号" filterable v-model="scope.row.twoColumnId" clearable>
                                <el-option v-for="item in choiceList" :key="item.id" :label="item.code"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="长编组重联" width="120" align="center">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.isLong" class="is-long-checkbox" true-label="1"
                                false-label="0">
                            </el-checkbox>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 修改作业计划对话框 -->
        <el-dialog :title="title" :visible.sync="openEdit" v-if="openEdit" width="800px" append-to-body>
            <el-form ref="editForm" :model="editForm" label-suffix="：" label-width="120px" :rules="rules">
                <el-form-item label="台位">
                    {{ editForm.positionName }}
                </el-form-item>
                <el-form-item label="股道">
                    {{ editForm.trackName }}
                </el-form-item>
                <el-form-item label="班次">
                    <el-radio-group v-model="editForm.shift">
                        <el-radio label="1">白班</el-radio>
                        <el-radio label="2">夜班</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="日期" prop="jobDate">
                    <el-date-picker v-model="editForm.jobDate" :clearable="false" type="date" placeholder="选择日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="1列位">
                    <el-select placeholder="请选择车号" v-model="editForm.oneColumnId" @clear="clearoneColumnId" clearable
                        @change="selectoneColumnId">
                        <el-option v-for="item in choiceList" :key="item.id" :label="item.code" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="2列位">
                    <el-select placeholder="请选择车号" clearable v-model="editForm.twoColumnId" @clear="cleartwoColumnId"
                        @change="selecttwoColumnId">
                        <el-option v-for="item in choiceList" :key="item.id" :label="item.code" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="长编组重联">
                    <el-checkbox v-model="editForm.isLong" class="is-long-checkbox" true-label="1" false-label="0">
                    </el-checkbox>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 一二列位弹框 -->
        <el-dialog title="入库作业" :visible.sync="OnesShowCar" width="1200px" append-to-body>
            <div style="display: flex; justify-content: space-between">
                <div style="margin: 10px 0; font-size: 18px">车号：{{ carCode }}</div>
                <div>
                    <el-button type="primary" size="mini" @click="handleCheckData">数据检测</el-button>
                    <el-button type="primary" size="mini" @click="handlerestore">恢复作业</el-button>
                    <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
                </div>
            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="供电预检" name="first"></el-tab-pane>
                <el-tab-pane label="断电作业" name="second"></el-tab-pane>
                <el-tab-pane label="供电检修" name="third"></el-tab-pane>
            </el-tabs>
            <div style="height: 70vh; overflow-y: scroll; padding-right: 15px">
                <el-table :data="enterList">
                    <el-table-column label="检修班组" align="center" prop="workTeamName" min-width="180"
                        show-overflow-tooltip="" />
                    <el-table-column label="开始时间" align="center" prop="startTime" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                    <el-table-column label="插号志人员" align="center" prop="insertPersonName" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                    <el-table-column label="时长" align="center" prop="duration" min-width="180"
                        show-overflow-tooltip="" />
                    <el-table-column label="结束时间" align="center" prop="endTime" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                    <el-table-column label="撤号志人员" align="center" prop="removePersonName" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <!-- 无车 -->
        <el-dialog title="入库作业" :visible.sync="NoneShowCar" width="1200px" append-to-body>
            <div style="display: flex; justify-content: space-between">
                <div style="margin: 10px 0; font-size: 18px">车号：{{ carCode }}</div>
                <div>
                    <el-button type="primary" size="mini" @click="handleCheckData">数据检测</el-button>
                    <el-button type="primary" size="mini" @click="handlerestore">恢复作业</el-button>
                    <el-button type="primary" size="mini" @click="handleExport">导出</el-button>
                </div>
            </div>

            <el-tabs v-model="NoneactiveName">
                <el-tab-pane label="无车作业" name="first"></el-tab-pane>
            </el-tabs>
            <div style="height: 70vh; overflow-y: scroll; padding-right: 15px">
                <el-table :data="noCarList">
                    <el-table-column label="检修班组" align="center" prop="workTeamName" min-width="180"
                        show-overflow-tooltip="" />
                    <el-table-column label="开始时间" align="center" prop="startTime" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                    <el-table-column label="插号志人员" align="center" prop="insertPersonName" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                    <el-table-column label="时长" align="center" prop="duration" min-width="180"
                        show-overflow-tooltip="" />
                    <el-table-column label="结束时间" align="center" prop="endTime" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                    <el-table-column label="撤号志人员" align="center" prop="removePersonName" min-width="180"
                        show-overflow-tooltip="">
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <el-dialog :title="settingTitle" :visible.sync="settingPlan" width="900px" append-to-body>
            <div class="selectGroups">
                <div class="left">
                    <div class="leftTop">
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                            @change="handleCheckAllChange">所有班组
                        </el-checkbox>
                    </div>
                    <div class="leftBottom">
                        <div>
                            <el-checkbox-group v-model="checkedFirst" @change="handleCheckedFirstChange"
                                style="diaplay: block">
                                <el-checkbox v-for="item in workTeamLists" :label="item.id" :key="item.id">{{ item.name
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
                <div style="width: 80px; margin: auto; text-align: center">
                    <div style="width: 100%" @click="selectRightData">
                        <img src="../../../assets/images/right.png" alt="" />
                    </div>
                    <div style="width: 100%; margin-top: 50px" @click="selectLeftData">
                        <img src="../../../assets/images/left.png" alt="" />
                    </div>
                </div>
                <div class="left">
                    <div class="leftTop">
                        <el-checkbox :indeterminate="isIndeterminateSecond" v-model="checkAllSecond"
                            @change="handleCheckAllChangeSecond">已选班组
                        </el-checkbox>
                    </div>
                    <div class="leftBottom">
                        <div>
                            <el-checkbox-group v-model="checkedSecond" @change="handleCheckedChangeSecond"
                                style="diaplay: block">
                                <el-checkbox v-for="items in selectLists" :label="items.id" :key="items.id">{{
                                    items.name
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormSetting">确 定</el-button>
                <el-button @click="cancelsetting">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 设置时间 -->
        <el-dialog :title="timeTitle" :visible.sync="settingTime" width="700px" append-to-body>
            <el-form :model="TimeForm" size="small" label-width="150px" :rules="timerules" ref="timeform">
                <el-form-item label="开始时间" prop="oneStartTime" v-if="onesFlag">
                    <el-date-picker v-model="TimeForm.oneStartTime" type="datetime" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="oneEndTime" v-if="onesFlag">
                    <el-date-picker v-model="TimeForm.oneEndTime" type="datetime" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="开始时间" prop="twoStartTime" v-if="twosFlag">
                    <el-date-picker v-model="TimeForm.twoStartTime" type="datetime" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="twoEndTime" v-if="twosFlag">
                    <el-date-picker v-model="TimeForm.twoEndTime" type="datetime" format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFormTime">确 定</el-button>
                <el-button @click="settingTime = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    listWorkPlan,
    getWorkPlan,
    delWorkPlan,
    addWorkPlan,
    updateWorkPlan,
    listChoice,
    listbycar,
    workTeamList,
    PlanTeamlistvo,
    addlist,
    editonoff,
    PlanTeamOnOff,
    Planrestore,
    checkData,
    edittime,
    gettimeInfo,
} from "@/api/planManage/planManage";
import { listPosition } from "@/api/baseData/position";
import { listTrack } from "@/api/baseData/track";
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
    name: "WorkPlan",
    data() {
        return {
            activeNames: 'first',
            timeTitle: "",
            timerules: {
                oneEndTime: [
                    {
                        required: true,
                        message: "结束时间不能为空",
                        trigger: "blur",
                    },
                ],
                oneStartTime: [
                    {
                        required: true,
                        message: "开始时间不能为空",
                        trigger: "blur",
                    },
                ],
                twoStartTime: [
                    {
                        required: true,
                        message: "开始时间不能为空",
                        trigger: "blur",
                    },
                ],
                twoEndTime: [
                    {
                        required: true,
                        message: "开始时间不能为空",
                        trigger: "blur",
                    },
                ],
            },
            // 选择时间对象
            TimeForm: {
                id: "",
                startTime: "",
                endTime: "",
            },
            // 设置时间弹框
            settingTime: false,
            selectLists: [],
            checkAll: false,
            checkedFirst: [],
            checkedSecond: [],
            cities: cityOptions,
            isIndeterminate: true,
            isIndeterminateSecond: true,
            checkAllSecond: false,
            workTeamLists: [],
            settingPlan: false,
            settingTitle: "",
            complete: 1,
            timer: null,
            planGuid: "",
            oneId: "",
            noCarList: [],
            NoneactiveName: "first",
            NoneShowCar: false,
            oneTotal: 0,
            carCode: "",
            enterList: [],
            activeName: "first",
            OnesShowCar: false,
            editArray: [],
            jobDateArray: [],

            eleTabTop: 0, //表格容器eleTabTop距浏览器顶部距离
            choiceList: [], // 列位下拉框
            positionList: [], // 台位
            trackList: [], // 股道
            dateRange: [], // 日期范围
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 作业计划表格数据
            workPlanList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                jobDate: undefined,
                pageNum: 1,
                pageSize: 10,
                oneColumn: null,
                twoColumn: null,
                trackName: null,
                positionName: null,
                startTime: null,
                endTime: null,
                shift: null,
                isLong: null,
                twoEndTime: null,
                twoStartTime: null,
                oneStartTime: null,
                oneEndTime: null,
            },
            // 表单参数
            form: {
                jobDate: "", // 日期
                shift: "1", // 白班或者夜班
                workPlanList: [],
            },
            openEdit: false, // 修改弹窗
            editForm: {
                positionId: "",
                positionName: "",
                trackId: "",
                trackName: "",
                oneColumnId: null,
                twoColumnId: null,
                isLong: "",
                shift: "",
                id: null,
            },
            // 表单校验
            rules: {
                jobDate: [
                    {
                        required: true,
                        message: "日期不能为空",
                        trigger: "blur",
                    },
                ],
                shift: [
                    {
                        required: true,
                        message: "班次不能为空",
                        trigger: "blur",
                    },
                ],
            },
            temps: "",
            flag: false,
            oneParams: {
                carCode: null,
                complete: null,
                type: null,
                workPlanId: null,
            },
            complete: "",
            workPlanId: "",
            onesFlag: false,
            twosFlag: false,
        };
    },
    props: [
        'jobDate', 'shift'
    ],
    created() {

    },
    mounted() {
        // 滚动条的获取
        this.handleScrollx();
        window.addEventListener("scroll", this.handleScrollx, true);
    },
    activated() {
        //获取表格容器距页面头部的距离
        this.handleScrollx();
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScrollx, true);
        // this.timer = null;
        // clearInterval(this.timer)
    },
    methods: {
        getDetails() {
            this.queryParams.jobDate = this.jobDate
            this.queryParams.shift = this.shift
            this.queryParams.positionName = "第一台"
            this.getList();
            this.getDict(); // 获取新增页面字典
        },
        handleBack() {
            this.$router.push({
                path: "/plan/plan/index",
            });
        },
        // 修改 handleClick 方法
        handleClicks(tab, event) {
            this.activeNames = tab.name
            // 根据tab的name映射到对应的台位名称
            const positionMap = {
                'first': '第一台',
                'second': '第二台',
                'third': '第三台',
                'fourth': '第四台'
            };

            // 更新查询参数中的台位条件
            this.queryParams.positionName = positionMap[tab.name] || null;

            // 重置分页为第一页
            this.queryParams.pageNum = 1;

            // 重新获取数据
            this.getList();
        },
        handleSettingFirstTime(row) {
            this.timeTitle = "设置一列位时间";
            this.complete = 1;
            this.timeInfo(row.id);
            this.onesFlag = true;
            this.twosFlag = false;
        },
        handleSettingSecondTime(row) {
            this.twosFlag = true;
            this.onesFlag = false;
            this.timeTitle = "设置二列位时间";
            this.complete = 2;
            this.timeInfo(row.id);
        },
        timeInfo(id) {
            this.timeId = id;
            gettimeInfo({
                id: id,
                complete: this.complete,
            }).then((res) => {
                this.settingTime = true;
                this.TimeForm = res.data;
            });
        },
        submitFormTime() {
            this.TimeForm.id = this.timeId;
            this.TimeForm.complete = this.complete;
            this.$refs["timeform"].validate((valid) => {
                if (valid) {
                    edittime(this.TimeForm).then((res) => {
                        this.msgSuccess("时间设置成功");
                        this.settingTime = false;
                    });
                }
            });
        },
        handleStatusChange(row) {
            this.$modal
                .confirm("确认要修改班组卡控状态吗？")
                .then(function () {
                    return editonoff(row.id);
                })
                .then(() => {
                    this.$modal.msgSuccess("修改成功");
                })
                .catch(function () {
                    row.teamOnoff = row.teamOnoff === "0" ? "1" : "0";
                });
        },
        submitFormSetting() {
            addlist({
                workPlanId: this.workPlanId,
                complete: this.complete,
                workTeamIdList: this.selectLists.map((item) => item.id),
            }).then((res) => {
                this.msgSuccess("设置成功");
                this.settingPlan = false;
                this.getList();
            });
        },
        cancelsetting() {
            this.settingPlan = false;
        },
        deWeight(arr, initArr = []) {
            arr.forEach((item) => {
                let isFind = initArr.find((cell) => cell.id === item.id);
                if (!isFind) {
                    initArr.push(item);
                }
            });
            return initArr;
        },
        selectRightData() {
            let datas = [];
            this.checkedFirst.forEach((item) => {
                this.workTeamLists.forEach((items) => {
                    if (item == items.id) {
                        datas.push(items);
                    }
                });
            });
            this.selectLists = this.deWeight([...datas, ...this.selectLists]);
        },
        selectLeftData() {
            console.log(this.checkedSecond);
            PlanTeamOnOff({
                workPlanId: this.workPlanId,
                complete: this.complete,
                workTeamIdList: this.checkedSecond.join(","),
            }).then((res) => {
                console.log(res);
                if (res.code == 200) {
                    this.checkedSecond.forEach((item, index) => {
                        this.selectLists.forEach((items, indexs) => {
                            if (item == items.id) {
                                this.selectLists.splice(indexs, 1);
                            }
                        });
                    });
                    this.checkedSecond = [];
                }
            });
        },
        handleCheckAllChange(val) {
            let ids = this.workTeamLists.map((item) => item.id);
            this.checkedFirst = val ? ids : [];
            this.isIndeterminate = false;
        },
        handleCheckedFirstChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.workTeamLists.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.workTeamLists.length;
        },
        handleCheckAllChangeSecond(val) {
            let ids = this.selectLists.map((item) => item.id);
            this.checkedSecond = val ? ids : [];
            this.isIndeterminateSecond = false;
        },
        handleCheckedChangeSecond(value) {
            let checkedCount = value.length;
            this.checkAllSecond = checkedCount === this.selectLists.length;
            this.isIndeterminateSecond =
                checkedCount > 0 && checkedCount < this.selectLists.length;
        },
        handleSettingFirst(row) {
            this.checkedSecond = [];
            this.checkedFirst = [];
            this.isIndeterminate = true;
            this.isIndeterminateSecond = true;
            this.complete = 1;
            this.workPlanId = row.id;
            this.getworkTeamList();
            this.getPlanTeamlistvo(row);
            this.settingPlan = true;
            this.settingTitle = "设置1列位班组";
        },
        handleSettingSecond(row) {
            this.checkedSecond = [];
            this.checkedFirst = [];
            this.isIndeterminate = true;
            this.isIndeterminateSecond = true;
            this.complete = 2;
            this.workPlanId = row.id;
            this.getworkTeamList();
            this.getPlanTeamlistvo(row);
            this.settingPlan = true;
            this.settingTitle = "设置2列位班组";
        },
        handleWorkplan(row) {
            this.checkedSecond = [];
            this.checkedFirst = [];
            this.isIndeterminate = true;
            this.isIndeterminateSecond = true;
            this.complete = 0;
            this.workPlanId = row.id;
            this.getworkTeamList();
            this.getPlanTeamlistvo(row);
            this.settingPlan = true;
            this.settingTitle = "设置作业班组";
        },
        getPlanTeamlistvo(row) {
            PlanTeamlistvo({
                complete: this.complete,
                workPlanId: row.id,
            }).then((res) => {
                let data = [];
                res.rows.forEach((item) => {
                    data.push({
                        id: item.workTeamId,
                        name: item.teamName,
                    });
                });
                // this.checkedSecond = data.map((item=>item.id))
                this.selectLists = data;
            });
        },
        getworkTeamList() {
            workTeamList().then((res) => {
                this.workTeamLists = res.rows;
            });
        },
        clearoneColumnId(e) {
            this.editForm.oneColumnId = null;
            this.editForm.oneColumn = null;
        },
        cleartwoColumnId() {
            this.editForm.twoColumnId = null;
            this.editForm.twoColumn = null;
        },
        selecttwoColumnId(e) {
            if (this.editForm.oneColumnId) {
                this.choiceList.forEach((item) => {
                    if (item.id == this.editForm.oneColumnId && item.code.includes("L")) {
                        if (this.editForm.twoColumnId != this.editForm.oneColumnId) {
                            this.msgError("请选择同一辆车");
                        }
                    }
                });
            }
        },
        selectoneColumnId(e) {
            this.choiceList.forEach((item) => {
                if (item.id == e && item.code.includes("L")) {
                    this.editForm.twoColumnId = e;
                }
            });
        },
        handleClick(tab, event) {
            this.activeName = tab.name;
            if (this.activeName == "first") {
                this.oneParams.type = 1;
            } else if (this.activeName == "second") {
                this.oneParams.type = 2;
            } else if (this.activeName == "third") {
                this.oneParams.type = 3;
            }
            this.getlistbycar();
        },
        twoColumn(carCode, id, planGuid) {
            if (carCode == "无车") {
                this.NoneactiveName = "first";
                this.oneParams.type = 4;
                this.NoneShowCar = true;
            } else {
                this.activeName = "first";
                this.oneParams.type = 1;
                this.OnesShowCar = true;
            }
            this.carCode = carCode;
            this.oneId = id;
            this.planGuid = planGuid;
            this.complete = 2;
            this.oneParams.carCode = carCode;
            this.oneParams.workPlanId = id;
            this.oneParams.complete = 2;

            this.getlistbycar();
        },
        OneColmu(carCode, id, planGuid) {
            if (carCode == "无车") {
                this.NoneactiveName = "first";
                this.oneParams.type = 4;
                this.NoneShowCar = true;
            } else {
                this.activeName = "first";
                this.oneParams.type = 1;
                this.OnesShowCar = true;
            }
            this.carCode = carCode;
            this.oneId = id;
            this.planGuid = planGuid;
            this.complete = 1;
            this.oneParams.carCode = carCode;
            this.oneParams.workPlanId = id;
            this.oneParams.complete = 1;
            this.getlistbycar();
        },
        getlistbycar() {
            listbycar(this.oneParams).then((res) => {
                if (this.oneParams.carCode == "无车") {
                    this.noCarList = res.rows;
                } else {
                    this.enterList = res.rows;
                }
            });
        },
        setvalueclear(val, index) {
            this.form.workPlanList[index].temps = "";
            this.flag = false;
        },

        // 对话框1列位
        handleOneColumnId(row, index) {
            this.form.workPlanList[index].temps = "";
            this.choiceList.forEach((item) => {
                if (item.code.includes("L") && row.oneColumnId === item.id) {
                    row.twoColumnId = item.id;
                    this.form.workPlanList[index].temps = item.code;
                }
            });
        },
        // 对话框2列位

        handleTwoColumnId(row, index) {
            console.log(this.form.workPlanList[index].temps)
            if (this.form.workPlanList[index].temps) {
                if (row.oneColumnId !== row.twoColumnId) {
                    this.msgError("请选择同一辆车");
                    this.flag = true;
                } else {
                    this.flag = false;
                }
            } else {
                this.flag = false;
            }
        },
        //获取表格容器距页面头部的距离
        handleScrollx() {
            this.eleTabTop = this.$refs.eleTab.getBoundingClientRect().top;
        },
        /** 查询作业计划列表 */
        getList() {
            this.loading = true;
            listWorkPlan(this.addDateRange(this.queryParams)).then((response) => {
                this.workPlanList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
            // this.getIntever();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.dateRange = [];
            this.resetForm("queryForm");
            this.queryParams.jobDate = null;
            this.queryParams.positionName = null;
            this.activeNames = 'first';
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        // 获取新增页面字典
        async getDict() {
            // 列位下拉框
            let choiceRes = await listChoice();
            if (choiceRes.code === 200) {
                this.choiceList = choiceRes.rows;
            }
            // 台位
            let positionRes = await listPosition();
            if (positionRes.code === 200) {
                this.positionList = positionRes.rows;
            }
            // 股道
            let trackRes = await listTrack();
            if (trackRes.code === 200) {
                this.trackList = trackRes.rows;
            }
        },
        // 设置添加表格数据
        setWorkPlanList() {
            let resArr = [];
            this.positionList.map((itemP) => {
                this.trackList.map((itemT) => {
                    let infoObj = {
                        positionId: itemP.id,
                        positionName: itemP.name,
                        trackId: itemT.id,
                        trackName: itemT.name,
                        oneColumnId: null,
                        twoColumnId: null,
                        isLong: "0",
                    };
                    resArr.push(infoObj);
                });
            });
            this.form.workPlanList = [...resArr];
            let getParams = JSON.parse(localStorage.getItem("setParams"));
            if (getParams && this.title === "添加计划") {
                this.form.workPlanList = getParams.workPlanList;
            }
        },
        // 合并表格行
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            let listLength = this.trackList.length;
            if (columnIndex === 0) {
                if (rowIndex % listLength === 0) {
                    return {
                        rowspan: listLength,
                        colspan: 1,
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0,
                    };
                }
            }
        },
        /** 新增按钮操作 */
        handleAdd() {
            if (this.title === "添加计划") {
                // this.getDict(); // 获取新增页面字典
                if (localStorage.getItem("setParams")) {
                    let getParams = JSON.parse(localStorage.getItem("setParams"));
                    this.form.shift = getParams.shift;
                    this.form.jobDate = getParams.jobDate;
                }
            } else {
                this.reset();
            }
            this.setWorkPlanList(); // 设置添加表格数据
            this.open = true;
            this.title = "添加计划";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.resetEdit();
            const id = row.id || this.ids;
            getWorkPlan(id).then((response) => {
                this.editForm = response.data;
                this.editArray.push(
                    this.editForm.jobDateStart,
                    this.editForm.jobDateEnd
                );
                this.openEdit = true;
                this.title = "修改计划";
            });
        },
        // 取消按钮
        cancel() {
            if (this.title === "添加计划") {
                let setParams = {
                    shift: this.form.shift,
                    jobDate: this.form.jobDate,
                    workPlanList: this.form.workPlanList,
                };
                localStorage.setItem("setParams", JSON.stringify(setParams));
            }
            this.open = false;
            this.openEdit = false;
            // this.reset();
            this.resetEdit();
        },
        // 表单重置
        reset() {
            this.form = {
                jobDate: "", // 日期
                shift: "1", // 白班或者夜班
                workPlanList: [
                    {
                        id: null,
                        jobDate: null,
                        shift: null,
                        positionId: null,
                        positionName: null,
                        trackId: null,
                        trackName: null,
                        oneColumnId: null,
                        oneColumn: null,
                        twoColumnId: null,
                        twoColumn: null,
                        complete: null,
                        isLong: null,
                        startTime: null,
                        endTime: null,
                        twoEndTime: null,
                        twoStartTime: null,
                        oneStartTime: null,
                        oneEndTime: null,
                    },
                ],
            };
            this.resetForm("form");
        },
        // 重置编辑表单
        resetEdit() {
            this.editForm = {
                positionId: "",
                positionName: "",
                trackId: "",
                trackName: "",
                oneColumnId: null,
                twoColumnId: null,
                isLong: "",
                shift: "",
                id: null,
            };

            this.resetForm("editForm");
        },
        /** 提交按钮 */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (formName === "editForm") {
                        updateWorkPlan(this.editForm).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.openEdit = false;
                            this.getList();
                        });
                    } else {
                        this.form.workPlanList.forEach((item) => {
                            item.shift = this.form.shift;
                            item.jobDate = this.form.jobDate;
                        });
                        if (this.flag) return this.msgError("请选择正确的数据");

                        addWorkPlan(this.form).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            localStorage.removeItem("setParams");
                            this.reset();
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal
                .confirm("是否确认删除作业计划？")
                .then(function () {
                    return delWorkPlan(ids);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        handlerestore() {
            Planrestore({
                carCode: this.carCode,
                complete: this.complete,
                planId: this.oneId,
            }).then((res) => {
                this.$modal.msgSuccess("恢复成功");
            });
        },
        handleCheckData() {
            checkData({
                carCode: this.carCode,
                complete: this.complete,
                planId: this.oneId,
            }).then((res) => {
                this.$modal.msgSuccess("检测成功");
            });
        },
        /** 导出按钮操作 */
        //
        handleExport() {
            this.downloads(
                `workRecord/workRecord/createXLS?workPlanId=${this.oneId}&planGuid=${this.planGuid}&carCode=${this.carCode}&complete=${this.complete}`,
                {
                    workPlanId: this.oneId,
                    planGuid: this.planGuid,
                    carCode: this.carCode,
                    complete: this.complete,
                },
                `workPlan_${new Date().getTime()}.xls`
            );
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep .eleTab {
    .el-table__header-wrapper {
        position: fixed;
        z-index: 9;
        top: 115px;
        right: 354px;
        padding-left: 573px;
    }

    .el-table__fixed-header-wrapper .fixed-width {
        position: fixed;
        width: 350px !important;
        top: 115px;
        height: 46px;
        right: 20px;
    }

    .el-table__body-wrapper {
        margin-top: 50px !important;
    }

    .el-table__fixed-body-wrapper {
        z-index: 2;
        top: 50px !important;
    }

    .el-table__fixed-right {
        // z-index: 10;
    }
}

.selectGroups {
    margin: 0 20px;
    display: flex;
    margin-bottom: 20px;

    .left {
        .leftTop {
            text-align: center;
            width: 330px;
            height: 45px;
            line-height: 38px;

            .el-checkbox {
                width: 100%;
                height: 45px;
                border: 1px solid #ccc;
            }
        }

        .leftBottom {
            height: 60vh;
            overflow: auto;
            border: 1px solid #ccc;
            border-top: none;

            .el-checkbox {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: block;
                width: 100%;
                height: 35px;
                line-height: 35px;
                padding-left: 30px;
            }
        }
    }
}

.el-checkbox,
.el-checkbox__label {
    font-size: 22px;
}

/* checkbox */
.el-checkbox__inner {
    height: 22px;
    width: 22px;
}

/* check mark */
.el-checkbox__inner::after {
    height: 14px;
    left: 8px;
}

::v-deep .el-tabs {
    height: 48px;
}

::v-deep .el-tabs__item {
    font-weight: 600 !important;
    font-size: 16px;
}

::v-deep .el-tabs__content {
    display: none;
}

::v-deep .eleTab {
    .s {
        justify-content: space-around;
    }

    .borders {
        border-bottom: 1px solid !important;
    }
}

::v-deep.hideSidebar {
    .eleTab {
        .el-table__header-wrapper {
            padding-left: 249px !important;
        }
    }
}
</style>
